<template>
  <el-main>
    <el-form :model="LoginForm" ref="LoginForm" :rules="rule" label-width="0" class="login-form"><h3>用户登录系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="LoginForm.username" placeholder="username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="LoginForm.password" placeholder="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="submitBtn" round @click.native.prevent="submit" :loading="logining"> 登录
        </el-button>
        <el-button type="primary" class="resetBtn" round @click.native.prevent="reset"> 重置</el-button>
        <hr>
        <p>还没有账号，马上去注册</p></el-form-item>
    </el-form>
  </el-main>
</template>
<script>
  export default {
  data() {
    return {
      LoginForm: {username: '', password: ''},
      logining: false,
      rule: {
        username: [{required: true, max: 14, min: 7, message: '用户名是必须的，长度为7-14位', trigger: 'blur'}],
        password: [{required: true, message: '密码是必须的！', trigger: 'blur'}]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true
          console.log('开始请求后台数据，验证返回之类的操作！')
          this.$router.push('/head')
        } else {
          console.log('submit err')
        }
      })
    },
    reset() {
      this.$refs.LoginForm.resetFields()
    },
    toregin() {
      this.$router.push('/regin')
    }
  }
}</script>
<style scoped>
  .login-form {
  margin: 170px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 35px #B4BCCC; /*css3阴影*/
  padding: 30px 30px 0 30px;
  border-radius: 30px; /*css3圆角边框*/
}

.submitBtn {
  width: 65%;
}

.to {
  color: #67C23A;
  cursor: pointer;
}
</style>
